<template>
  <div class="group-list">
    <el-tabs v-model="activeName">
      <el-tab-pane label="车辆品牌" name="sign">
        <div>
          <div ref="dgtools" class="filter-container">
            <div class="dgts-fm">
              <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
                >增加车辆品牌</el-button
              >
            </div>

            <TableSelfSet
              v-if="dg.columns.length > 0"
              :tbTitle="'品牌类型-车辆品牌'"
              :dgName="dg.dgName"
              :tbId="dg.tbName"
              :srcCols="dg.srcCols"
              :columns="dg.columns"
              @saveSet="saveTbSet"
            />
          </div>
          <el-table
            :ref="dg.tbName"
            :data="dg.list"
            row-key="id"
            :height="bodyHeight - 55"
            :row-class-name="rowClassName"
            border
            fit
            @header-dragend="dragHeader"
          >
            <el-table-column
              fixed="left"
              type="index"
              width="40"
            ></el-table-column>
            <fragment v-for="col in dg.columns" :key="col.field">
              <el-table-column
                :class-name="dg.dgName"
                :prop="col.field"
                :label="col.label"
                :width="col.width"
              >
                <template slot-scope="{ row }">
                  <template v-if="col.field == 'oper'">
                    <el-button type="text" size="small" @click="handleEdit(row)"
                      >修改</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      @click="handleDelete(row)"
                      >删除</el-button
                    >
                  </template>
                  <template v-else-if="col.field == 'vehicleType'">
                    {{ getArrCarType(row.vehicleType) }}
                  </template>
                  <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
              </el-table-column>
            </fragment>
          </el-table>
          <pagination
            v-show="dg.total > 0"
            :total="dg.total"
            :page.sync="dg.ps.page"
            :limit.sync="dg.ps.rows"
            @pagination="getDgList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="车辆系列" name="series">
        <Series />
      </el-tab-pane>
    </el-tabs>

    <AddType
      v-if="md.add.state"
      :state="md.add.state"
      :isEditId="isEditId"
      @getMdState="getAddMdState"
      @reloadDg="getDgList"
    />
  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import elDragDialog from "@/directive/el-drag-dialog";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";
import AddType from "./addType";
import Series from "./series";

// import {
//   brandUpdate,
//   findBrandByIdList,
// } from "@/api/services/system.service";
import {
  findBrandList,
  brandDelete,
  brandUpdate,
} from "@/api/services/common.service";

export default {
  name: "SignType",
  mixins: [DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination, AddType, Series },
  data() {
    let cols = [
      { label: "品牌名称", field: "brandName" },
      { label: "品牌类型", field: "vehicleType" },
      { label: "添加时间", field: "addTime" },
      { label: "操作", field: "oper" },
    ];

    return {
      activeName: "sign",
      dg: {
        dgName: "dg",
        tbName: "signTypeTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
          brandName: "", // 利润方向
          carType: "", // 类型名称
          eTime: "",
          sTime: "",
        },
      },
      md: {
        add: { state: false },
        upd: { state: false },
      },
      profintOptions: [
        { value: "INCOME", label: "收入类" },
        { value: "OUTPAY", label: "支出类" },
        { value: "TRANS", label: "互转类" },
      ],
      isEdit: false,
      isEditId: null,
    };
  },

  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    getArrCarType(index) {
      return {
        BUS: "大巴车",
        MINIBUS: "中巴车",
        MPV: "商务车",
        SUV: "越野车",
        CAR: "轿车",
        BMPV: "保姆车",
      }[index];
    },
    formatterDirection(row) {
      let result = this.profintOptions.find(
        (item) => item.value === row.profitDirection
      );
      return result.label;
    },
    handleAdd() {
      this.md.add.state = true;
      this.isEditId = null;
    },
    handleAddSend(data) {
      this.md.add.state = true;
    },
    handleEdit(row) {
      this.md.add.state = true;
      this.isEditId = row.id;
      // findMoneyTypeById({ id: row.id })
      //   .then((res) => {
      //     this.currentData = res.data;
      //     this.md.upd.state = true;
      //   })
      //   .catch(() => {
      //     this.U.qerror("数据获取失败，请稍后再试");
      //   });
    },
    handleDelete(row) {
      this.U.qconfim(`确认删除品牌类型【${row.brandName}】吗？`).then(r => {
        if(r){
          let loading = this.U.qloading("删除中...");
          brandDelete({ id: row.id }).then((res) => {
            this.U.qclose(loading);
            const { code, msg } = res;
            if (code !== 1) {
              return this.U.qerror(msg);
            }
            this.U.qsuccess(msg);
            this.getDgList();
          }).catch(() => {
            this.U.qclose(loading);
          });
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
    /** 获取-分页列表数据 */
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      findBrandList(this.dg.ps)
        .then((res) => {
          this.U.qclose(loading);
          const { code, data, count } = res;
          if (code === 1) {
            let list = data;
            list.forEach((it) => {
              it.dgName = this.dg.dgName;
            });
            this.dg.list = list;
            this.dg.total = count;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    /**
     * 打开添加弹框
     */
    getAddMdState(e) {
      this.isEdit = false;
      this.md.add.state = e;
      this.md.upd.state = e;
    },
    /**
     * 打开修改弹框
     * @param e 弹框显隐状态
     */
    getUpdMdState(e) {
      // 关闭弹框
      if (e === false) {
        this.md.upd.state = e;
        return;
      }
      // 打开弹框
      let len = this.dg.selRows;
      if (len.length !== 1) {
        this.U.qerror("请选择一条数据");
      } else {
        this.md.upd = { state: e, data: this.dg.selRows[0] };
      }
    },
    /**
     * 删除
     */
    deleteVehicle() {
      const that = this;

      let len = that.dg.selRows.length;
      if (len !== 1) {
        that.U.qerror("请选择一条数据");
      } else {
        let row = that.dg.selRows[0];

        that.U.qconfim(`确认删除小组【${row.groupName}-${row.linkName}】吗？`).then(r => {
          if(r){
            let loading = that.U.qloading("删除中...");
            groupDelete({ id: row.id }).then((res) => {
              that.U.qclose(loading);

              if (res.code !== 1) {
                that.U.qerror(res.msg);
              } else {
                that.U.qsuccess(res.msg);

                // 删除一行
                that.dg.list.splice(row.index, 1);
              }
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.paddingLeft {
  padding-left: 24px;
}
.paddingLeft_3 {
  padding-left: 48px;
}
</style>